// 页面加载完成后初始化
$(document).ready(function () {
  // 获取URL中的查询参数
  const params = new URLSearchParams(window.location.search);
  const keyword = params.get("keyword") || "";
  // 设置搜索框的值
  $("#keyword").val(keyword);

  // 如果有关键词，立即执行搜索
  if (keyword) {
    selectBook(1, 10);
  }

  // 绑定搜索按钮点击事件，阻止默认提交行为
  $("#searchBtn").click(function (e) {
    e.preventDefault(); // 阻止表单默认提交
    selectBook(1, 10);
  });

  // 绑定表单提交事件，阻止默认提交行为
  $("form").submit(function (e) {
    e.preventDefault(); // 阻止表单默认提交
    selectBook(1, 10);
  });
});

// 获取列表容器
const $bookList = $(".qm-pic-txt");
function selectBook(pageNum, pageSize) {
  let keyword = $("#keyword").val();
  $.ajax({
    type: "POST",
    url: "selectBook.do",
    data: {
      keyword: keyword,
    },
    dataType: "json",
    success: function (data) {
      // 清空列表
      $bookList.empty();

      // 遍历数据并渲染
      let bookData = data.data.data;
      if (bookData != null && bookData.length > 0) {
        $.each(bookData, function (index, book) {
          // 处理未定义的主角数据
          const protagonist = book.protagonist || "暂无";
          const updateTime = "2024-10-31 18:43:01"; // 假设统一更新时间

          console.log(book);

          // 创建列表项元素
          const $li = $("<li></li>");

          // 设置列表项HTML内容
          $li.html(`
	            <div class="pic">
	              <a href="#">
	                <img src="${book.bookImg}" alt="${book.bookName}封面">
	              </a>
	            </div>
	            <div class="txt">
	              <span class="s-tit">
	                <a href="#">
	                  <span>${book.bookName}</span>
	                </a>
	              </span>
	              <span class="s-tags">
	                <a href="#">${book.bookType}</a>
	                &nbsp;&nbsp;&nbsp;&nbsp;${book.is_finished}&nbsp;&nbsp;103.68万字
	              </span>
	              <span class="s-des">
	                ${book.bookIntroduction}
	              </span>
	              <p class="p-bottom">
	                <span class="s-txt_01">
	                  <em>作&nbsp;&nbsp;者：</em>
	                  <a href="#">${book.bookWriter}</a>
	                  &nbsp;&nbsp;
	                  主&nbsp;&nbsp;角：${protagonist}
	                </span>
	                <span class="s-txt_02">
	                  <em>更新至：</em>
	                  <a href="#">最新章节</a>
	                  &nbsp;&nbsp;
	                  <em class="fz12">${updateTime}</em>
	                </span>
	              </p>
	            </div>
	            <div class="btn">
	              <a href="novelWriting.html?bookId=${book.bookId}&bookName=${book.bookName}&bookWriter=${book.bookWriter}">立即阅读</a>
	            </div>
	          `);

          // 添加到列表容器
          $bookList.append($li);
        });
      }
    },
    error: function (error) {
      console.error("请求出错:", error);
      // 显示错误提示
      $bookList.html(`
          <li class="error-result">
            <div class="error-message">
              <p>加载数据失败，请稍后再试</p>
              <button id="retry-load">重试</button>
            </div>
          </li>
        `);
    },
  });
}
